<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="static/css/quiz.css">
    <link rel="stylesheet" href="static/css/markdown.css">
    <title>开始答题 - 智慧答题系统</title>
    <!-- KaTeX数学公式支持 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
</head>
<body>
    <!-- 顶部进度条 -->
    <div class="quiz-header">
        <div class="container">
            <div class="quiz-header-content">
                <div class="quiz-timer" id="timer">
                    <span class="timer-icon">⏱</span>
                    <span class="timer-text" id="timerText">00:00</span>
                </div>
                <div class="quiz-title">
                    <span id="quizCategory">综合知识测试</span>
                </div>
                <div class="quiz-nav">
                    <a href="/" class="back-btn">返回首页</a>
                </div>
            </div>
            <div class="progress-bar-container">
                <div class="progress-bar" id="progressBar"></div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="quiz-container">
        <div class="container">
            <!-- 题目区域 -->
            <div class="question-section" id="questionSection">
                <div class="question-counter">
                    <span id="currentQuestion">1</span> / <span id="totalQuestions">10</span>
                </div>
                
                <div class="question-card">
                    <div class="question-title" id="questionTitle">
                        题目加载中...
                    </div>
                    
                    <div class="question-options" id="questionOptions">
                        <!-- 选项将动态生成 -->
                    </div>
                </div>
            </div>

            <!-- 按钮区域 -->
            <div class="quiz-actions">
                <button class="btn-prev" id="prevBtn" disabled>上一题</button>
                <button class="btn-next" id="nextBtn">下一题</button>
                <button class="btn-submit" id="submitBtn" style="display: none;">提交答案</button>
            </div>
        </div>
    </div>

    <!-- 结果弹窗 -->
    <div class="result-modal" id="resultModal">
        <div class="result-modal-content">
            <div class="result-header">
                <div class="result-icon">✓</div>
                <h2>答题完成！</h2>
            </div>
            <div class="result-body">
                <div class="result-stats">
                    <div class="stat-item">
                        <div class="stat-value" id="correctCount">0</div>
                        <div class="stat-label">答对</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="wrongCount">0</div>
                        <div class="stat-label">答错</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="score">0</div>
                        <div class="stat-label">得分</div>
                    </div>
                </div>
                <p class="result-message" id="resultMessage"></p>
            </div>
            <div class="result-actions">
                <button class="btn-primary" id="reviewBtn">查看详情</button>
                <button class="btn-secondary" id="backHomeBtn">返回首页</button>
            </div>
        </div>
    </div>

    <!-- AI助手浮动按钮 -->
    <button class="ai-assistant-btn" id="aiAssistantBtn" title="AI助手">
        🤖
    </button>

    <!-- AI助手对话框 -->
    <div class="ai-chat-panel" id="aiChatPanel">
        <div class="ai-chat-header">
            <h3>AI答题助手</h3>
            <select class="ai-service-selector" id="aiServiceSelector" title="选择AI服务">
                <option value="deepseek">DeepSeek</option>
                <option value="kimi">Kimi</option>
            </select>
            <button class="ai-close-btn" id="aiCloseBtn">✕</button>
        </div>
        <div class="ai-chat-messages" id="aiChatMessages">
            <div class="ai-message ai-message-assistant">
                <div class="ai-message-content">
                    你好！我是AI答题助手，有什么问题可以问我哦～ 😊
                </div>
            </div>
        </div>
        <div class="ai-chat-input-area">
            <textarea class="ai-chat-input" id="aiChatInput" placeholder="输入你的问题..." rows="2"></textarea>
            <button class="ai-send-btn" id="aiSendBtn">发送</button>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="static/js/quiz.js"></script>
</body>
</html>

